<template>
  <div class="stayHotel">
    <el-card class="box-card">
      <el-button
        type="primary"
        icon="el-icon-s-custom"
        @click="checkinbtn"
      >入住登记</el-button>
      <!-- <el-button type="primary" plain icon="el-icon-circle-plus">安排房间</el-button> -->
      <!-- <el-button type="primary" plain>押金记录</el-button> -->

      <!-- <el-button type="primary" plain >结账</el-button> -->
      <!-- 弹层组件 -->
      <el-col
        :span="5"
        class="search"
      >
        <!-- <el-select
          v-model="userInList.state"
          placeholder="请查询"
          @change="getRoomList"
        >
          <el-option
            value="1"
            label="已结账"
          />
          <el-option
            value="0"
            label="未结账"
          />
        </el-select> -->
      </el-col>
      <el-col
        :span="5"
        class="search"
      >
        <el-input
          placeholder="请输入房间号"
          v-model="q"
          @blur="getUsersList"
        ></el-input>
      </el-col>

      <el-table
        :data="userInList"
        border
        style="width: 100%;margin-top:20px;"
      >
        <el-table-column
          fixed
          prop="roomNum"
          label="房间号"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="phoneNum"
          label="电话号码"
        >
        </el-table-column>
        <el-table-column
          prop="IdNumber"
          label="身份证号码"
          width="200px"
        >
        </el-table-column>
        <el-table-column
          prop="roomType"
          label="房间类型"
          :formatter=" formatEmployment"
        >
        </el-table-column>
       
    <el-table-column
      prop="dataTime"
      label="入住时间">
   <template v-slot="{row}">
     {{row.dataTime |formatDate }}
   </template>
    </el-table-column>
    <el-table-column
      prop="deposit"
      label="押金"
     >
    </el-table-column>
     <el-table-column
      prop="allmoney"
      label="总费用"
     >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
     >
      <template v-slot="{row}">
       <el-button type="danger" size="mini"  @click="checkoutbtn(row)" :disabled="row.state ? true:false" >{{row.state?"已结账":"结账"}}</el-button>
      </template>
    </el-table-column>
    <!-- 分页 -->
     <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[3, 5, 10]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="1000">
    </el-pagination> -->
    </el-table>
    <el-row justify="center" type="flex" style="margin:20px">
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page.sync="page.page"
          :page-sizes="[3, 5, 10 ]"
          :page-size="page.limit"
          layout="sizes, prev, pager, next"
          :total="page.total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <Checkout
      :flag.sync="showDialogs"
      ref="pinfo"
    />
    <Checkin :flag.sync="showDialog" />
  </div>
</template>

<script>
import { getRoomList } from '@/api/rooms'
import { getUsersList } from '@/api/users'
import Checkin from './components/Checkin'
import Checkout from './components/Checkout'
import Rooms from '@/utils/constant/rooms' //引入枚举对象
export default {
  data () {
    return {
      q: '',
      pinfo: null,
      userInList: [{
        dataTime: '',
        username: '',
        roomType: '',
        roomNum: '',
        phoneNum: '',
        IdNumber: '',
        allmoney: '',
        deposit: '',
        state: null
      }],
      showDialog: false,
      showDialogs: false,
      page: {
        page: 1,
        limit: 5,
        total: 0
      },
      roomnum: ''
    }
  },
  methods: {
    checkinbtn () {
      this.showDialog = true
    },
    async getRoomList (value) {
      this.userInList
    },
    async getUsersList () {
      // 根据分页查询字符串查询到用户列表并且赋值
      this.userInList = await getUsersList({ _page: this.page.page, _limit: this.page.limit, roomNum_like: this.q,_sort:"dataTime",_order:"desc" })
      // 查询到所有的数据，拿到总数
      this.page.total = (await getUsersList({roomNum_like: this.q})).length
      this.userInList.forEach(async item => {
        const { price } = (await getRoomList({ num_like: item.roomNum }))[0]
        const allmoney = price * item.time
        item.allmoney = allmoney
      })
    },
    //枚举
    formatEmployment (row, column, cellValue, index) {
      const obj = Rooms.type.find(item => item.id === cellValue)
      return obj ? obj.value : '未知'
    },
    checkoutbtn (row) {
      this.$refs.pinfo.closingData = row
      this.showDialogs = true
    },
    // 按照关键字排序
    // setArray (c) {
    //   c.sort(this.compare('dataTime'));
    //   return c;
    // },
    // compare (property) {
    //   return function (a, b) {
    //     return b[property] - a[property];
    //   }
    // },
    async pageChange (newpage) {
      this.page.page = newpage
      this.getUsersList()
      // this.userInList = await getUsersList({ _page: newpage, _limit: this.page.limit, roomNum_like: this.q })
      //页码
    },
    sizeChange (page) {
      //每页显示的数据
      this.page.limit = page
      this.getUsersList()
    },
  },
  
  components: {
    Checkin,
    Checkout
  },
  created () {
    this.getRoomList()
    this.getUsersList()
  }
}

</script>

<style>
.line {
  text-align: center;
}

.stayHotel {
  position: relative;
  width: 90%;
  margin: 30px auto;
}
.search {
  margin-right: 10px;
}
</style>
